<template>
	<v-card>
		 <v-timeline reverse>
      <v-timeline-item
        v-for="n in subs"
        :key="n"
        class=""
      >
      <template v-slot:icon>
        <v-avatar>
          <img :src=n.img>
        </v-avatar>
      </template>
       <template v-slot:opposite>
          <span
          :class="`headline font-weight-bold --text`"
          v-text="$t('message.subinf')+n.name+$t('message.updated')"
        ></span><br/>
        <span
          :class="` font-weight-bold --text`"
          v-text="n.time"
        ></span>
       
        <!-- <v-card-title class="headline">{{$t("message.subinf")}}{{n.name}}{{$t("message.updated")}}</v-card-title> -->
      </template>
      
      
        <!-- <v-card class="elevation-2 " > -->
          
          
          <v-card-text class="">
            <v-hover  v-slot:default="{ hover }">
              <v-card class="mx-auto"  :elevation="hover ? 15 : 2" id="card" max-width="300px">
                <v-hover v-slot:default="{ hover }">
                  <v-img class="white--text" height="200px" :src="n.pic">
                    <v-expand-transition>
                      <div
                        v-if="hover"
                        class="d-flex transition-fast-in-fast-out black darken-4 v-card--reveal white--text title"
                        style="height: 100%;"
                      >
                        <p class="pa-4">{{n.text}}</p>
                      </div>
                    </v-expand-transition>
                    <template v-slot:placeholder>
                      <v-row class="fill-height ma-0" align="center" justify="center">
                        <v-progress-circular indeterminate color="primary"></v-progress-circular>
                      </v-row>
                    </template>
                  </v-img>
                </v-hover>
                <v-card-text class="title pt-4" style="position: relative;">
                  <router-link :to="{name:'group',query:{gid:n.gid,index:1}}">
                    <v-btn absolute color="primary" class="white--text" fab large right top>
                      <v-icon>mdi-play</v-icon>
                    </v-btn>
                  </router-link>
                  <p class="text-truncate">{{n.vname}}</p>
                </v-card-text>
                
              </v-card>
            </v-hover>
          </v-card-text>
        <!-- </v-card> -->
      </v-timeline-item>
    </v-timeline>
	</v-card>
</template>

<script>
export default {
		data: () => ({
			subs:[],
    }),
    methods:{
      initsubs(){
        var params = new URLSearchParams();
      params.append("uid", this.$cookies.get("user")); //你要传给后台的参数值 key/value
      this.$axios({
        method: "post",
        url: "http://47.100.35.226/php/news.php",
        data: params
      })
        .then(response => {
          this.subs=response.data;
        })
        .catch(function(error) {
          console.log(error);
        });
      },
      init(){
        this.initsubs();
      }
    },
    created(){
      this.init();
    }
	}
</script>

<style>
</style>
